<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // readyState   前端请求的状态
    // 0：请求未初始化（只是创建了请求 还没有配置请求相关的信息 =>调用 open()）。
    // 1：请求已经建立 , 已经配置请求相关的信息 但是请求还未发送=>调用 send()）。
    // 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
    // 3: 请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
    // 4: 请求处理完毕,返回响应的结果 (结果不一定是成功的  )

    // status      后端响应的状态(结果不一定是成功的)
    // 1**	信息，服务器收到请求，需要请求者继续执行操作
    // 2**	成功，操作被成功接收并处理
    // 3**	重定向，需要进一步的操作以完成请求
    // 4**	客户端错误，请求包含语法错误或无法完成请求
    // 5**	服务器错误，服务器在处理请求的过程中发生了错误

    // 200：ok，页面正确打开，并得到完整的响应内容。
    // 301：被请求的资源已永久移动到新位置
    // 302：请求的资源临时从不同的 URI响应请求
    // 304：缓存
    // 404：页面不存在。
    // 500：常指后端代码发生错误
    // 503：由于临时的服务器维护或者过载，服务器当前无法处理请求。

    // 1. 创建http请求(请求的载体)
    var req = new XMLHttpRequest();
    console.log(req);
    console.log(req.readyState); // 0

    // 2. 配置请求相关的信息  (请求的方式  请求的地址  是否异步(true))
    // req.open(type,url,async)
    // type  请求的方式(get post delete put)
    // url   请求的地址
    // async  是否异步 (true:异步  false:同步)

    // 注意: 因为现在没有后端和数据库  =>  ajax可以请求同服务器下的其他文件(html,css,js,txt)  => 返回文件内的文本 (此时只能用get请求)

    req.open("get", "../data/1.txt", true);
    console.log(req.readyState); // 1

    // 3. 发送请求
    req.send();
    console.log(req.readyState); // 1  (异步原因导致 => 且听下回分解)


    // 4. 绑定事件,监听请求状态的改变  (页面加载时不会执行,状态改变时会执行)
    req.onreadystatechange = function () {
        console.log("readystatechange:", req.readyState);  // 2 3 4

        // req.readyState == 4   有结果 
        // req.status == 200     结果也是成功的
        if (req.readyState == 4 && req.status == 200) {
            console.log(req.responseText);
        }
    }





</script>

</html>